<!-- 城市搜索 -->
<!-- 城市搜索 -->
<!-- 城市搜索 -->
<template>
  <div ref="wrapper" class="wrapper">
    <div class="content">
      <!-- 热门城市区块 -->
      <div>
        <div class="hot">
          <h2>热门城市</h2>
          <p style="">{{"当前城市："+this.currentCity}}</p>
        </div>
        <ul class="hot-list">
          <li class="hot-item"
              v-for ="(item,key) of hotList"
              :key="key.id"
              @click='changeCityName(item.name)'
          >{{ item.name }}</li>
        </ul>
      </div>
      <!-- 热门城市区块 -->

      <!-- 字母集合区 -->
      <div>
        <div class="sort-title">字母分类</div>
        <ul class="sort-list">
          <li class="sort-item"
              v-for="(item,key) of sortList"
              :key="key"
              @click='changeSort(key)'
          >{{ key }}</li>
        </ul>
      </div>
      <!-- 字母集合区 -->

      <!-- v-for循环输出 -->
      <!-- 将key（也就是字母）绑定到ref就可实现点击字母时跳转到当前字母区 -->
      <div v-for="(val,key) of sortList" :key="key.id" :ref="key">
        <div class="lists">
          <h2>{{ key }}</h2>
        </div>
        <ul class="list-initials">
          <li class="list-item"
              v-for="(item,key) of val"
              :key="key.id"
              @click="changeCityName(item.name)"
          >{{ item.name }}</li>
        </ul>
      </div>
      <!-- v-for循环输出 -->
    </div>
  </div>

</template>

<script>
import BScroll from 'better-scroll'
import { mapState } from 'vuex'
export default {
  name: 'cityList',
  props: {
    sortList: Object,
    hotList: Array
  },
  data () {
    return {
      scroll: null
    }
  },
  // 计算属性
  computed: {
    // 把vuex里的数据 映射到当前组件的计算属性里,映射过来的名字叫currentCity
    ...mapState({
      currentCity: 'city'
    })
  },
  mounted () {
    // 创建betterScroll的实例，然后接收一个DOM元素
    this.scroll = new BScroll(document.querySelector('.wrapper'), {
      probeType: 3,
      pullUpLoad: true
    })
    console.log(this.scroll)
    // 不知道为什么每次进入页面 他的maxScrollY为-1就是暂停在当前页面不能往下滑动
    // 所以我这里直接更改了他的maxScrollY值然后才解决的bug
    this.scroll.maxScrollY = -11762

    console.log(this.scroll.maxScrollY)
  },
  methods: {
    changeSort (sortName) {
      // 在vue中直接操作DOM元素需要给改元素绑定ref
      // 调用scroll中的scrollToElement方法跳转到指定区
      const element = this.$refs[sortName][0]
      this.scroll.scrollToElement(element)
    },
    // 该方法为回到主页
    changeCityName (cityName) {
      // 回到首页
      this.$router.push('/')
      // 想要调用actions 一定要先调用dispatch方法
      // 异步操作将点击的城市数据提交给actions
      this.$store.commit('changeCity', cityName)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/publicStyle.styl'
  @import '~styles/mixins.styl'
  /** 热门城市区块CSS **/
.wrapper
  top 1.4rem
  position absolute
  overflow hidden
  height 100%
  width 100%
  left 0
  right 0
  bottom 0
  background #f5f5f5
  .hot
    font-size .24rem
    margin-top .2rem
    line-height .8rem
    padding-left .3rem
    p
      border 1px solid #d9d7d9
      border-radius 15px
      margin-top -.74rem
      line-height 30px
      height 30px
      font-size .30rem
      margin-left 3.7rem
      margin-bottom 8px
      text-align center
      padding-right .1rem
      ellipsis()
      width 45%
      color $bgHeader
      font-weight bold
  .hot-list
    position relative
    color #212121
    overflow hidden
    background white
    .hot-item
      position relative
      ellipsis()
      width 33.3%
      height .9rem
      line-height .9rem
      text-align center
      border-bottom .01rem solid #ddd
      margin-bottom -1px
      float left
      z-index 10
    .hot-item:active
      background #00bcd4
      transition .5s
  // 添加虚拟标签 然后定位到指定位置 形成边框
  .hot-list:before
    frameBeforeThree()
  /** 热门城市区块CSS **/

  /** 字母集合区CSS **/
  .sort-title
    font-size .24rem
    line-height .8rem
    padding 0 .3rem
  .sort-list
    position relative
    color #212121
    overflow hidden
    background white
    padding .3rem 0
    .sort-item
      position relative
      width 16.6%
      height .9rem
      line-height .9rem
      text-align center
      float left
      ellipsis()
    .sort-item:active
      background #00bcd4
      transition .5s
  /** 字母集合区CSS **/

  /** 首字母集合区CSS **/
  .lists
    font-size .24rem
    line-height .8rem
    padding 0 .3rem
    background #f5f5f5
  .list-initials
    position relative
    color #212121
    overflow hidden
    background white
    .list-item
      position relative
      ellipsis()
      width 25%
      height .9rem
      line-height .9rem
      text-align center
      border-bottom .01rem solid #ddd
      margin-bottom -1px
      float left
    .list-item:active
      background #00bcd4
      transition .5s
  // 添加虚拟标签 然后定位到指定位置 形成边框
  .list-initials:before
    frameBeforeFour()
  .list-initials:after
    frameAfterFour()
  /** 首字母集合区CSS **/
</style>
